<template>
  <div class="dashboard">
    <topAndbottom>
      <template #title>阶段配置</template>
      <template #container>
        <div class="common-container">
          <div class="container-search">
            <el-form :model="searchParams" label-width="80px" @submit.native.prevent="" :inline="true" size="default">
              <el-form-item label="阶段名">
                <el-input v-model="searchParams.name" @keyup.enter.native="" clearable @clear="" />
              </el-form-item>
              <el-form-item>
                <el-button :icon="Search"  @click="serachBtn" type="primary">搜索</el-button>
                <el-button :icon="Close"  @click="resetBtn" type="danger">重置</el-button>
                <el-button  :icon="Plus"  type="success" @click="addBtn">新增</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="container-table">
            <el-table v-loading="tableData.Loading" :height="tableData.tableHeigth" :data="tableData.list" style="width: 100%" :row-class-name="tableRowClassName">
              <el-table-column prop="name" show-overflow-tooltip label="阶段名称" align="center" />
              <el-table-column prop="de" show-overflow-tooltip label="阶段优先级" align="center" />
              <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                  <el-button  type="primary"  :icon="Edit"
                    @click="editBtn(scope.row)">编辑</el-button>
                  <el-button  type="danger" :icon="Close" @click="deleteBtn(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="container-footer">footer数据</div>
        </div>
      </template>

    </topAndbottom>
  </div>
</template>

<script setup lang='ts'>
import { Search, Plus, Edit, Close } from '@element-plus/icons'
import { reactive, toRefs, onBeforeMount, ref, onMounted } from 'vue'
import getWorkList from './table'
const { getTableList, tableData, searchParams,deleteBtn ,addBtn,RefStage,editBtn,resetBtn,tableRowClassName} = getWorkList()
const serachBtn = () => {
  getTableList()
}

</script>
<style scoped lang='scss'>
.dashboard {
  height: 100%;
  :deep(.el-form-item__label){
    color: #fff;
  }
}
</style>